<template>
    <view class="login-container">
      <view class="header">
        <view class="logo"></view>
        <text class="app-title">商户APP</text>
      </view>
  
      <view class="login-form">
        <view class="input-item">
          <input class="input" type="text" placeholder="请输入用户名" v-model="username" autocomplete="off" />
        </view>
  
        <view class="input-item">
          <input class="input" type="password" placeholder="请输入密码" v-model="password" autocomplete="off" />
        </view>
  
        <button class="login-button" @click="login">登录</button>
      </view>
    </view>
  </template>
  
  <script>
  import { userApi } from '../../utils/api'
  
  export default {
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login() {
        if (!this.username || !this.password) {
          uni.showToast({
            title: '请填写完整信息',
            icon: 'none'
          })
          return
        }
        
        userApi.login({
          username: this.username,
          password: this.password
        }).then(res => {
          console.log('登录响应数据:', res)
          // 保存token
          uni.setStorageSync('token', res.data)
          console.log('保存的token:', res.data)
          
          // 获取用户信息
          return userApi.getUserInfo()
        }).then(res => {
          console.log('用户信息响应:', res)
          // 保存用户信息
          uni.setStorageSync('userInfo', res.data)
          
          // 检查用户角色
          return userApi.checkRole(res.data.uId)
        }).then(res => {
          if (!res.data) {
            uni.showToast({
              title: '您不是商家用户，无法登录',
              icon: 'none'
            })
            // 清除登录信息
            uni.removeStorageSync('token')
            uni.removeStorageSync('userInfo')
            return
          }
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
          
          // 跳转到首页
          uni.switchTab({
            url: '/src/pages/home/index'
          })
        }).catch(err => {
          console.error('登录失败:', err)
        })
      }
    }
  }
  </script>
  
  <style>
  .login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100rpx;
    background-color: #C70209;
    min-height: 100vh;
  }
  
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50rpx;
  }
  
  .logo {
    width: 150rpx;
    height: 150rpx;
    background-color: #ffffff;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }
  
  .app-title {
    font-size: 40rpx;
    color: #ffffff;
  }
  
  .login-form {
    width: 90%;
    background-color: #db6868;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30rpx;
  }
  
  .input-item {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 10rpx;
    padding: 20rpx;
    background-color: #ffffff;
  }
  
  .input {
    flex: 1;
    font-size: 30rpx;
    border: none;
    outline: none;
  }
  
  .login-button {
    margin-top: 30rpx;
    background-color: #ffffff;
    color: #C70209;
    font-size: 32rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    width: 100%;
    border: 2rpx solid #C70209;
  }
  </style>
  